<template>
  <div id="app">
    <div class="container">
      <div class="close"><span class="iconfont iconicon-test"></span></div>
      <div class="logo"><span class="iconfont iconnew"></span></div>
      <div class="inputs">
        <!-- <input placeholder="请输入手机号" class="input" /><input
          placeholder="密码"
          class="input"
          type="password"
        /> -->

        <!-- 在使用子组件的时候，为子组件赋值属性，优先给子组件的props成员赋值，如果props中没有对应的设置，那么就直接给组件的根元素赋值 -->
        <!-- <hminput
          placeholder="用户名 / 手机号码"
          :value="user.username"
          @input="handler"
        ></hminput> -->
        <hminput
          placeholder="用户名 / 手机号码"
          @blur="handlerinput"
          v-model="user.username"
          :rule="
            /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
          "
        ></hminput>
        <hminput placeholder="密码" v-model="user.password"></hminput>
        <hminput placeholder="昵称" v-model="user.nickname"></hminput>
      </div>
      <p class="tips">
        已有账号？
        <a href="#/login" class="">去登录</a>
      </p>
      <!-- 登录按钮 -->
      <hmbutton type="primary" @click="register">注册</hmbutton>
    </div>
  </div>
</template>

<script>
// 引入按钮组件
import hmbutton from "@/components/hmbutton.vue";
// 引入文本框组件
import hminput from "@/components/hminput.vue";
// 引入注册请求模块
import { registeruser } from "@/apis/user";
export default {
  // 注册组件
  components: {
    hmbutton,
    hminput,
  },
  data() {
    return {
      user: {
        username: "",
        password: "",
        nickname: "",
      },
    };
  },
  methods: {
    // 用户输入手机号不合法
    handlerinput() {
      if (!/^1\d{10}$|^1\d{4}$/.test(this.user.username))
        this.$toast("用户名输入不正确");
    },
    // 注册
    async register(e) {
      try {
        let res = await registeruser(this.user);
        // 轻提示
        this.$toast.success({
          message: "注册成功",
          position: "top",
        });
        // 实现页面的跳转
        this.$router.push({ name: "login" });
      } catch (err) {
        console.log(err);
        this.$toast.fail({
          message: "输入数据不合法，请重新输入",
          position: "top",
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  padding: 20px;
}

.close {
  span {
    font-size: 27 / 360 * 100vw;
  }
}

.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: 126 / 360 * 100vw;
    color: #d81e06;
  }
}

.inputs {
  input {
    margin-bottom: 20px;
  }
}

.tips {
  text-align: right;
  margin-bottom: 20px;

  a {
    color: #3385ff;
  }
}
</style>